<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码控件-PCH5需要安装插件版本</title>
    <script src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/js/jquery-3.1.1.min.js"></script>
    <script src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/microdone/index.js"></script>
    <script src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/pass-guard-ctrl/crypto-js.js"></script>
    <script src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/pass-guard-ctrl/index.js"></script>
    <script src="https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/pass-guard-ctrl/crypto-js.js"></script>
<!-- 生产环境使用 -->
<!--    <script src="https://oss-mpay-static.lianlianpay.com/html/lib/pass-guard-ctrl/PassGuardCtrl.js"></script>-->
    <!-- 测试环境使用 -->
    <script src="../js/PassGuardCtrl.js"></script>
</head>

<body>
<div id="_ocx_password_str"></div>
<button id="get-password">获取密码</button>

<script>
    function initPasswordForPc(props) {
        const { container, id, className, passwordRandom } = props
        const pgeditor = new $.pge({
            pgePath: 'https://mpay-static.oss-cn-hangzhou.aliyuncs.com/html/lib/pass-guard-ctrl/ocx/', // 控件文件目录
            pgeId: id, // 控件ID
            pgeEdittype: 0, // 控件类型,0星号,1明文
            pgeEreg1: '[\\s\\S]*', // 输入过程中字符类型限制
            pgeEreg2: '[a-zA-Z0-9]{6,12}',        // 输入完毕后字符类型判断条件
            pgeCert: passwordRandom.public_key, // RSA加密公钥
            pgeCert1: passwordRandom.public_key_der,
            pgeMaxlength: 12, // 允许最大输入长度
            pgeTabindex: 2, // tab键顺序
            pgeClass: className, // 控件css样式
            pgeInstallClass: className, // 针对安装或升级
            pgeOnkeydown: () => { }, // 回车键响应函数
            tabCallback: id, // 火狐tab键回调函数,设置要跳转到的对象ID
            // windows10相关
            pgeWindowID: 'password' + new Date().getTime() + 1,
            pgeRZRandNum: passwordRandom.sKey,
            pgeRZDataB: passwordRandom.enStr,
        })
        window.pgeCtrl = pgeditor
        pgeditor.pgInitialize() // 初始化控件
        container.innerHTML = pgeditor.generate1()
        return {
            getValue() {
                return new Promise((resolve, reject) => {
                    if (pgeditor.osBrowser === 10 || pgeditor.osBrowser === 11) { // Edge,新版本Chrome使用非插件的方案
                        const wid = pgeditor.settings.pgeWindowID
                        pgeditor.pwdLength(() => {
                            if (Number(window.outs[wid].length) === 0) {
                                return reject('EMPTY')
                            }
                            pgeditor.pwdValid(() => {
                                if (Number(window.outs[wid].valid) === 1) {
                                    return reject('FORMAT_ERROR')
                                }
                                pgeditor.pwdSetSk(passwordRandom.mcrypt_key, () => {
                                    pgeditor.pwdResultRsa(() => {
                                        return resolve(window.outs[wid].aes)
                                    })
                                })
                            })
                        })
                    } else {
                        const passwordLength = Number(pgeditor.pwdLength())
                        if (passwordLength === 0) {
                            return reject('EMPTY')
                        }
                        if (passwordLength < 6) {
                            return reject('FORMAT_ERROR') // 支持6~12位数字字母组合
                        }
                        pgeditor.pwdSetSk(passwordRandom.mcrypt_key)
                        return resolve(pgeditor.pwdResultRsa())
                    }
                })
            },
        }
    }

    window.onload = () => {
        //const random_v = {"enStr":"FbAGO6DyytpLWaFUxNB6jjhhRxk5bVqsAJ59ReITmgo=","mcrypt_key":"57769465965629663354711922430901","public_key":"-----BEGIN CERTIFICATE-----\nMIIFlTCCBH2gAwIBAgIQYTC2Vefifv0qr9D6R/ga6TANBgkqhkiG9w0BAQUFADCB\nvDELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\nExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\nYXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykxMDE2MDQGA1UEAxMt\nVmVyaVNpZ24gQ2xhc3MgMyBJbnRlcm5hdGlvbmFsIFNlcnZlciBDQSAtIEczMB4X\nDTEzMDMxMjAwMDAwMFoXDTE3MDUxMDIzNTk1OVowgcoxCzAJBgNVBAYTAkNOMREw\nDwYDVQQIEwhaaGVqaWFuZzERMA8GA1UEBxQISGFuZ3pob3UxNjA0BgNVBAoULUxp\nYW5saWFuIFlpbnRvbmcgRWxlY3Ryb25pYyBQYXltZW50IENvLiwgTHRkLjEPMA0G\nA1UECxQGUGF5IElUMTMwMQYDVQQLFCpUZXJtcyBvZiB1c2UgYXQgd3d3LnZlcmlz\naWduLmNvbS9ycGEgKGMpMDUxFzAVBgNVBAMUDnlpbnRvbmcuY29tLmNuMIIBIjAN\nBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzjKcwzzLuErydolRM9wAU5spZwJp\n1qkWjIxkuF+/oHsdrziTBMgjkvYA4Xl0BmBdwyycfHLJxvzv5QlGV3QNERdSCiUS\nl3Vg3flhgvqI+rQSyNmHB3dfwwCoAiEc8Lahi9XV+QvfKQMU6JcwLpCz0oOmgqWn\nbdJ8k9hzql4WktS6EdAI1FBodFPV9L/JexnjjJBdjcPvw5PACaCKxW+wRc0m8s0/\n9dCT9cc0wz+XLAzW83WFViysxkPn0HuOCWwLbV1jbYjBbn3Te40FQXiX8ir/EmBi\nb0QFnNedZd1tdNdPxzxKJpZze0WEMktZm7FGr7REPpQXPwXKL/OOPzHnpQIDAQAB\no4IBgTCCAX0wGQYDVR0RBBIwEIIOeWludG9uZy5jb20uY24wCQYDVR0TBAIwADAO\nBgNVHQ8BAf8EBAMCBaAwQwYDVR0gBDwwOjA4BgpghkgBhvhFAQc2MCowKAYIKwYB\nBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMwQQYDVR0fBDowODA2\noDSgMoYwaHR0cDovL1NWUkludGwtRzMtY3JsLnZlcmlzaWduLmNvbS9TVlJJbnRs\nRzMuY3JsMCgGA1UdJQQhMB8GCCsGAQUFBwMBBggrBgEFBQcDAgYJYIZIAYb4QgQB\nMB8GA1UdIwQYMBaAFNebfNgioBX33a1fzimbWMO8RgC1MHIGCCsGAQUFBwEBBGYw\nZDAkBggrBgEFBQcwAYYYaHR0cDovL29jc3AudmVyaXNpZ24uY29tMDwGCCsGAQUF\nBzAChjBodHRwOi8vU1ZSSW50bC1HMy1haWEudmVyaXNpZ24uY29tL1NWUkludGxH\nMy5jZXIwDQYJKoZIhvcNAQEFBQADggEBAHt/lILCrLbxDQzn92MUaSRfwoZ6rSaM\nlAyTCkXabgBkut8x1H0CYlQcdZlJ1W/7PVpt9i5YQ9mkMJTNFfzWoHLX/BOk7Rle\naD0Eg6TA5J8zwX6wPxWfxwY/S3PgV5jYBdfBTcN3QpCzbPNYCdb7XK+m7xBPRj/K\ne7FL3vB5mzFBQoIkoIZ90TZ8B4bTEUta6BC2Wl7/JLuZZR95zWHcmzYU6swSYGql\nVwWVMh4LYvUYHDbaj8aQDFpq1jNXuCUHpO7y6RFY6XKoR9vvLAgpvPfUZI9ugVDw\n0Po/deEDBpqwZx4N+nUsXHIA+ohC05gX4TJe+xJeErQnUN1+5sg1MBA=\n-----END CERTIFICATE-----","public_key_der":"3082010a0282010100ce329cc33ccbb84af276895133dc00539b29670269d6a9168c8c64b85fbfa07b1daf389304c82392f600e1797406605dc32c9c7c72c9c6fcefe5094657740d1117520a2512977560ddf96182fa88fab412c8d98707775fc300a802211cf0b6a18bd5d5f90bdf290314e897302e90b3d283a682a5a76dd27c93d873aa5e1692d4ba11d008d450687453d5f4bfc97b19e38c905d8dc3efc393c009a08ac56fb045cd26f2cd3ff5d093f5c734c33f972c0cd6f37585562cacc643e7d07b8e096c0b6d5d636d88c16e7dd37b8d05417897f22aff1260626f44059cd79d65dd6d74d74fc73c4a2696737b4584324b599bb146afb4443e94173f05ca2ff38e3f31e7a50203010001","sKey":"03439443740383466190807343716360"};
        const random_v = {"enStr":"FbAGO6DyytpLWaFUxNB6jjhhRxk5bVqsAJ59ReITmgo=","mcrypt_key":"32827944054595389253932259088998","public_key":"-----BEGIN CERTIFICATE-----\nMIIFlTCCBH2gAwIBAgIQYTC2Vefifv0qr9D6R/ga6TANBgkqhkiG9w0BAQUFADCB\nvDELMAkGA1UEBhMCVVMxFzAVBgNVBAoTDlZlcmlTaWduLCBJbmMuMR8wHQYDVQQL\nExZWZXJpU2lnbiBUcnVzdCBOZXR3b3JrMTswOQYDVQQLEzJUZXJtcyBvZiB1c2Ug\nYXQgaHR0cHM6Ly93d3cudmVyaXNpZ24uY29tL3JwYSAoYykxMDE2MDQGA1UEAxMt\nVmVyaVNpZ24gQ2xhc3MgMyBJbnRlcm5hdGlvbmFsIFNlcnZlciBDQSAtIEczMB4X\nDTEzMDMxMjAwMDAwMFoXDTE3MDUxMDIzNTk1OVowgcoxCzAJBgNVBAYTAkNOMREw\nDwYDVQQIEwhaaGVqaWFuZzERMA8GA1UEBxQISGFuZ3pob3UxNjA0BgNVBAoULUxp\nYW5saWFuIFlpbnRvbmcgRWxlY3Ryb25pYyBQYXltZW50IENvLiwgTHRkLjEPMA0G\nA1UECxQGUGF5IElUMTMwMQYDVQQLFCpUZXJtcyBvZiB1c2UgYXQgd3d3LnZlcmlz\naWduLmNvbS9ycGEgKGMpMDUxFzAVBgNVBAMUDnlpbnRvbmcuY29tLmNuMIIBIjAN\nBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAzjKcwzzLuErydolRM9wAU5spZwJp\n1qkWjIxkuF+/oHsdrziTBMgjkvYA4Xl0BmBdwyycfHLJxvzv5QlGV3QNERdSCiUS\nl3Vg3flhgvqI+rQSyNmHB3dfwwCoAiEc8Lahi9XV+QvfKQMU6JcwLpCz0oOmgqWn\nbdJ8k9hzql4WktS6EdAI1FBodFPV9L/JexnjjJBdjcPvw5PACaCKxW+wRc0m8s0/\n9dCT9cc0wz+XLAzW83WFViysxkPn0HuOCWwLbV1jbYjBbn3Te40FQXiX8ir/EmBi\nb0QFnNedZd1tdNdPxzxKJpZze0WEMktZm7FGr7REPpQXPwXKL/OOPzHnpQIDAQAB\no4IBgTCCAX0wGQYDVR0RBBIwEIIOeWludG9uZy5jb20uY24wCQYDVR0TBAIwADAO\nBgNVHQ8BAf8EBAMCBaAwQwYDVR0gBDwwOjA4BgpghkgBhvhFAQc2MCowKAYIKwYB\nBQUHAgEWHGh0dHBzOi8vd3d3LnZlcmlzaWduLmNvbS9jcHMwQQYDVR0fBDowODA2\noDSgMoYwaHR0cDovL1NWUkludGwtRzMtY3JsLnZlcmlzaWduLmNvbS9TVlJJbnRs\nRzMuY3JsMCgGA1UdJQQhMB8GCCsGAQUFBwMBBggrBgEFBQcDAgYJYIZIAYb4QgQB\nMB8GA1UdIwQYMBaAFNebfNgioBX33a1fzimbWMO8RgC1MHIGCCsGAQUFBwEBBGYw\nZDAkBggrBgEFBQcwAYYYaHR0cDovL29jc3AudmVyaXNpZ24uY29tMDwGCCsGAQUF\nBzAChjBodHRwOi8vU1ZSSW50bC1HMy1haWEudmVyaXNpZ24uY29tL1NWUkludGxH\nMy5jZXIwDQYJKoZIhvcNAQEFBQADggEBAHt/lILCrLbxDQzn92MUaSRfwoZ6rSaM\nlAyTCkXabgBkut8x1H0CYlQcdZlJ1W/7PVpt9i5YQ9mkMJTNFfzWoHLX/BOk7Rle\naD0Eg6TA5J8zwX6wPxWfxwY/S3PgV5jYBdfBTcN3QpCzbPNYCdb7XK+m7xBPRj/K\ne7FL3vB5mzFBQoIkoIZ90TZ8B4bTEUta6BC2Wl7/JLuZZR95zWHcmzYU6swSYGql\nVwWVMh4LYvUYHDbaj8aQDFpq1jNXuCUHpO7y6RFY6XKoR9vvLAgpvPfUZI9ugVDw\n0Po/deEDBpqwZx4N+nUsXHIA+ohC05gX4TJe+xJeErQnUN1+5sg1MBA=\n-----END CERTIFICATE-----","public_key_der":"3082010a0282010100ce329cc33ccbb84af276895133dc00539b29670269d6a9168c8c64b85fbfa07b1daf389304c82392f600e1797406605dc32c9c7c72c9c6fcefe5094657740d1117520a2512977560ddf96182fa88fab412c8d98707775fc300a802211cf0b6a18bd5d5f90bdf290314e897302e90b3d283a682a5a76dd27c93d873aa5e1692d4ba11d008d450687453d5f4bfc97b19e38c905d8dc3efc393c009a08ac56fb045cd26f2cd3ff5d093f5c734c33f972c0cd6f37585562cacc643e7d07b8e096c0b6d5d636d88c16e7dd37b8d05417897f22aff1260626f44059cd79d65dd6d74d74fc73c4a2696737b4584324b599bb146afb4443e94173f05ca2ff38e3f31e7a50203010001","sKey":"03439443740383466190807343716360"};
        // 具体调用方法
        const passwordOcx = initPasswordForPc({
            container: document.getElementById('_ocx_password_str'),
            id: '_ocx_password',
            className: 'ocx_style',
            passwordRandom: random_v, // 这里传随机因子等参数，见password.js内部取了哪些
        })
        // 获取密码
        document.getElementById('get-password').addEventListener('click', () => {
            passwordOcx.getValue().then(password => {
                console.log('获取密码成功，密码是', password)
            }).catch(code => {
                // code EMPTY-input值为空 FORMAT_ERROR-密码格式校验不正确
                console.log('获取密码失败', code)
            })
        })
    }
</script>
</body>
</html>